作者|嘉宾冉夜澜|尹力 在联通互联网时代，由于设备资源有限、网络不稳定等诱因，Web性能优化变得尤为重要； 从用户感知的首屏指标的提升，到关键时序路径的拆解优化百度优化，都有类似的经验可以借鉴。

本文采访了百度App核心与搜索优化技术负责人尹力。 他介绍了百度的页面性能监控和优化实践，百度对H5页面首屏性能的措施，以及在搭建性能监控系统时遇到的问题。 困境。

在7月24-25日正式举办的GMTC全球大后端技术大会（广州站）上，尹力将作为特邀制作人带来一场“性能优化与监控”的专场。 届时将邀请具有丰富全链路监控和性能优化经验的技术专家进行分享。 通过全链路监控后台、后台、客户端全通道，找出用户未到场景下的主要损失原因，拆解用户到场场景下的性能困境，优化整个key时长路径，提高产品服务的稳定性和速度。

以下为采访内容。

InfoQ：您如何理解“性能优化”？

尹力：

所以基本思路是“业务不停，优化不停”。

InfoQ：百度针对H5页面的首屏性能采取了哪些措施？

尹力：

H5页面的加载过程可以分为四个阶段：端容器创建、发起网络请求、服务器处理、页面内核解析渲染。 针对这几个关键阶段，百度持续优化H5页面首屏表现，并通过GMTC、技术公众号等渠道与大家分享了优化方案，主要包括四个方面：

首次创建时间优化：对于在端加载自研内核的APP，冷启动创建确实是一笔不小的开销，但这部分操作本来就是在UI线程上执行的，会给用户带来卡顿感。 需要将初始化任务拆分成更小的单元，让每个小单元尽可能在后台线程中并行加载或者在UI线程中异步加载。 同时，端容器的创建和网络请求尽量异步并行，避免容器创建时间过长阻塞网络请求。

着陆页的主要文档和关键子资源通过可见区域预加载。 用户在实际访问页面时，无需等待主文档的网络加载，直接进入内核的主文档解析过程，整体上减少了资源的加载时长。

分块，将前端策略重、耗时长的服务分块，将公共JS、CSS的关键子资源先返回给浏览器。 浏览器内核可以优先解析和渲染这些资源，以优化整个管道。

百度T7核心实现了一套首屏优化算法，力图提前触发H5页面布局和轮廓，让页面轮廓内容尽快达到屏幕高度，充满首屏，提高用户的首屏感知率。

InfoQ：百度在构建性能监控系统时遇到了哪些困难？ 它是如何解决的？

尹力：

浏览器渲染网页主要包括五个过程：浏览器发起网络请求并接收HTTP数据、浏览器解析HTML文档、浏览器执行JS、浏览器布局、浏览器绘制屏幕。

后端JS只能监控最后三个进程，而忽略浏览器布局和绘制时间。 在PC浏览器上，最后两个进程比较稳定，也比较小。 使用JS监控方案基本可以得到页面加载率。 百度之前的监控系统也是这样做的，但是联通浏览器的布局和渲染时间比PC端要长很多，尤其是在异步渲染的极端情况下，布局和渲染占整体的50%以上期间。 PC监控方案会有较大误差。 有段时间发现一个问题，就是在线JS监控的首屏速度很快，而用户反馈百度搜索速度很慢，两者是矛盾的。

基于这个问题，百度采用了自定义的首屏监控指标FSP（），即页面绘制速度首次超过屏幕高度。 该指标包括从浏览器发起请求到页面首屏绘制的时间，也是基于用户体验真实感知的性能指标。

为了测试用户对首屏性能的真实感知，推出了很多标准，主要有FP（）、FCP（）、FMP（）、LCP（Paint）等。 目前还没有一个指标可以兼容所有场景。 比如有骨架屏场景，页面高度小且等于高度时，上述指标就容易出现问题。 为了更准确地构建业务的首屏性能指标，最好结合后端和浏览器内核来制定规则。 如果没有与自研内核的协作，可以综合采用上述提出的指标，看哪个指标适合自己的业务。

InfoQ：渲染引擎​​的布局算法存在哪些性能问题，又是如何解决的？

尹力：联通的浏览器渲染引擎是从PC浏览器继承和发展而来的，PC和联通的区别比较大。 由于PC端屏幕较大，渲染引擎的评价标准取决于整个页面加载的时长，而联通端屏幕较小。 比起整个页面的加载完成，首屏的快速展示对用户来说更为重要。 目前的渲染引擎对首屏指标的评价做了很多改进，确定了很多标准。 上面提到了FP、FCP、FMP、LCP，后端可以监听首屏的轮廓，对首屏高亮没有帮助 尽量延迟资源的加载和处理，加速首屏高亮屏幕。 而且浏览器在渲染算法上对联通首屏的高亮加速做的还不够，所以国外的一些浏览器渲染引擎在此基础上做了专门的改进。 比如百度的T7内核做了优化，减少Dom的前后端线程切换，预测页面首屏高度更早触发页面，从而提高首屏速度。 从线上数据验证来看，本次优化可以提升近10%的首屏率，收益还是很可观的。

InfoQ：目前百度性能监控系统的优化效果如何？

尹力：经过三年多的H5提速优化，包括搜索业务逻辑时长优化、页面内部跳转优化、内核渲染引擎优化、网络层时长优化等，百度App搜索落地页速度得到了优化整体提升30%以上。

InfoQ：下一步是什么？

尹力：

业界评价H5速度的指标有很多，包括后端监控、客户端监控和内核监控。 这些都是基于用户看到页面后的速度评价。 虽然错过了用户看不到页面的场景，但这种场景是很有可能的。 用户因网络异常、渲染失败或等待时间过长等原因离开。 这部分数据是费率指标无法监测到的，而且往往非常重要，直接影响到用户是否可以使用该服务。 所以对于这个场景，我们需要减少一个到达率的指标，可以定义为用户看到第一个屏幕的PV/用户发起请求的PV。 我们经常关注用户未到达的场景，可以使用公式（1-到达率）来估算未到达率。

页面首屏加载率早已被业界广泛接受，在业务发展的迭代过程中也会关注对首屏率的影响。 延迟首屏高亮不需要的耗时资源，直到首屏绘制加载执行。 这会导致内核线程在第一屏绘制后的一段时间内非常繁忙，此时只有在页面滚动时才会出现抖动和卡顿。 为了解决这个问题，我们需要构建一个卡顿率的指标，可以定义为卡顿时长/总用户浏览时间之和百度优化，其中卡顿时长定义为长任务持续时间超过门槛。 根据历史经验，UI线程中长任务阈值定义为30ms，内核渲染线程长任务阈值定义为50ms。

InfoQ：作为性能优化与监控环节的制作人，您目前关注的主要厂商有哪些性能优化实践？

尹力：在开源社区有很大的影响力。 目前前端国外的联通浏览器引擎基本都是基于开发的。 国外厂商通常站在巨头的右臂上，在其基础上做定制和二次开发，优化首屏率和卡顿率。 目前，从用户数量和技术的不断积累来看，腾讯的X5核心、阿里的U4核心和百度的T7核心的影响力都比较大。

嘉宾介绍

百度App核心及搜索优化技术负责人李寅，2014年加入百度，负责百度App渲染引擎T7核心的开发和优化，大幅提升了网页的浏览速度和流畅度； 之后负责百度App搜索率和体验优化的全过程，构建用户感知率和体验指标，完成全链路监控、拆解和优化； 曾就职于英特尔开源技术中心，负责开源社区的HTML5支持和优化。 2014 年，他分别被苹果任命为和开源社区。

活动推荐

GMTC全球大后端技术大会（上海站）2020，目前20折，限时优惠960元！ 联系票务体验丸子：（同陌陌）